<template>
    <div v-if="rows && rows.length" class="formula-rows" ref="formulaRows">
        <template v-for="(item, indexRow) in rows" :key="'line' + indexRow">
            <div class="formula-row">
                <template v-for="(rowItem, rowIndex) in item" :key="rowIndex">
                    <FormulaRows 
                        v-if="rowItem.rows && rowItem.rows.length" 
                        :rows="rowItem.rows" 
                        :class="{ 'radical-sign': rowItem.radical }" 
                        :tagOffset="tagOffset"
                        :style="rowItem.style"
                    ></FormulaRows>
                    <Word v-else :rowItem="rowItem" :tagOffset="tagOffset" :class="{ 'radical-sign': rowItem.radical }"></Word>
                </template>
            </div>
            <hr v-if="indexRow == 0 && rows.length>1" class="horizontal-line" />
        </template>
    </div>
</template>

<script setup>
// 每个字符
import Word from './word.vue';
// 引入多行
import FormulaRows from './formulaRows.vue';

const props = defineProps({
	// 角标偏移值
	tagOffset: {
		type: String,
		default: () => '3px'
	},
    // 根号
    radical: {
		type: Boolean,
		default: () => false
	},
    // 多行
    rows: {
        type: Array,
        default: () => []
        // [
        //     // 第一行
        //     [
        //         {
        //             content: 's',
        //             // 位置, 可选值: normal(正常),bottom(左下),top(右上)
        //             position: 'normal',
        //             // 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
        //             scale: 1,
        //             // 颜色, 默认:inherit(继承),initial(初始), ...
        //             color: 'inherit',
        //             // 字号, 默认:inherit(继承), 单位:px
        //             fontSize: 'inherit',
        //         }
        //     ],
        //     // 第二行
        //     [
        //         {
        //             content: 's',
        //             // 位置, 可选值: normal(正常),bottom(左下),top(右上)
        //             position: 'normal',
        //             // 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
        //             scale: 1,
        //             // 颜色, 默认:inherit(继承),initial(初始), ...
        //             color: 'inherit',
        //             // 字号, 默认:inherit(继承), 单位:px
        //             fontSize: 'inherit',
        //             // 渲染头部内容
        //             topContent: 'n',
        //             // 渲染底部内容
        //             bottomContent: 'i=s',
        //             // 头部、底部内容行高，默认：1
        //             tagLineHeight: '1',
        //         }
        //     ],
        // ]
    }
});

// 公式对象
const formulaRows = ref();
defineExpose({
    formulaRows
});
</script>

<style scoped lang="scss">
.formula-rows{
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
}
.formula-row {
    display: inline-block;

    >span {
        width: max-content;
    }
}

span {
    position: relative;
    z-index: 100;
    display: inline-block;
    vertical-align: middle;
}

// 横线
.horizontal-line {
    margin: 8px 0 0;
}

// 根号
.radical-sign {
    position: relative;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    padding: 5px;
    transform: skewX(-6deg);
}
.radical-sign::before {
    content: "＜";
    font-size: 20px;
    position: absolute;
    bottom: 3px;
    left: -19px;
    transform: rotate(82deg) skew(300deg);
}
</style>
